<%-- 首页滚动广告Portal显示列表 --%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib uri= "http://java.sun.com/jsp/jstl/core" prefix= "c" %>

<div class="content_right">
  <c:if test="${not empty requestScope.fullColAdLst}">
  <div class="ad" >
    <ul class="slider" >
      <c:forEach items="${requestScope.fullColAdLst }" var="fullColAdItem" varStatus="status">
      <li>
        <a href="./adDetail.do?id=${fullColAdItem.id}">
          <img src="./resource/uploadimg/${fullColAdItem.srcUrl}" title="${fullColAdItem.altInfo}"/>
        </a>
      </li>
      </c:forEach>
    </ul>
    
    <ul class="num" >
      <c:forEach items="${requestScope.fullColAdLst }" var="fullColAdItem" varStatus="status">
        <li>${status.count }</li>
      </c:forEach>
    </ul>
    
  </div>
  </c:if>
  
  <c:if test="${empty requestScope.fullColAdLst}">
  <div class="ad" >暂无图片</div>
  </c:if>
  
</div>

<script type="text/javascript">
/*首页广告效果*/
$(function(){
   var len  = $(".num > li").length;
     var index = 0;
     var adTimer;
     $(".num li").mouseover(function(){
        index  =   $(".num li").index(this);
        showImg(index);
     }).eq(0).mouseover();  
     
     //滑入 停止动画，滑出开始动画.
     $('.ad').hover(function(){
             clearInterval(adTimer);
         },function(){
             adTimer = setInterval(function(){
                showImg(index);
                index++;
                if(index==len){index=0;}
              } , 4000);
     }).trigger("mouseleave");
     
});

// 通过控制top ，来显示不同的幻灯片
function showImg(index){
    var adHeight = $(".content_right .ad").height();
    //$(".slider").stop(true,false).animate({bottom : -adHeight*index},1000); // //翻滚效果  
    $(".slider").css("top", -adHeight * index);     //跳转效果  
    $(".num li").removeClass("on").eq(index).addClass("on");
}
</script>